<template>
    <Table :columns="columns" :data="calData" border disabled-hover></Table>
</template>
<script>
    export default {
        name:"Calendar",
        props:{
            year:String,
            month:String,
            isMondayFirst:{
                type:Boolean,
                default:true
            },
            change:{}
        },
        data() {
            return {
                columns: [
                ],
                columnsAll:{
                    mondayFirst:[
                        {
                            title: '周一',
                            key: 'Monday',
                            align: 'center',
                            render: (h, {row, column, index}) => {
                                let value = row[column.key]
                                return this.getTableContent(h,value)
                            }
                        },
                        {
                            title: '周二',
                            key: 'Tuesday',
                            align: 'center',
                            render: (h, {row, column, index}) => {
                                let value = row[column.key]
                                return this.getTableContent(h,value)
                            }
                        },
                        {
                            title: '周三',
                            key: 'Wednesday',
                            align: 'center',
                            render: (h, {row, column, index}) => {
                                let value = row[column.key]
                                return this.getTableContent(h,value)
                            }
                        },
                        {
                            title: '周四',
                            key: 'Thursday',
                            align: 'center',
                            render: (h, {row, column, index}) => {
                                let value = row[column.key]
                                return this.getTableContent(h,value)
                            }
                        },
                        {
                            title: '周五',
                            key: 'Friday',
                            align: 'center',
                            render: (h, {row, column, index}) => {
                                let value = row[column.key]
                                return this.getTableContent(h,value)
                            }
                        },
                        {
                            title: '周六',
                            key: 'Saturday',
                            align: 'center',
                            render: (h, {row, column, index}) => {
                                let value = row[column.key]
                                return this.getTableContent(h,value)
                            }
                        },
                        {
                            title: "周日",
                            key: 'Sunday',
                            align: 'center',
                            render: (h, {row, column, index}) => {
                                let value = row[column.key]
                                return this.getTableContent(h,value)
                            }
                        },
                    ],
                    sundayFirst:[
                        {
                            title: "周日",
                            key: 'Sunday',
                            align: 'center',
                            render: (h, {row, column, index}) => {
                                let value = row[column.key]
                                return this.getTableContent(h,value)
                            }
                        },
                        {
                            title: '周一',
                            key: 'Monday',
                            align: 'center',
                            render: (h, {row, column, index}) => {
                                let value = row[column.key]
                                return this.getTableContent(h,value)
                            }
                        },
                        {
                            title: '周二',
                            key: 'Tuesday',
                            align: 'center',
                            render: (h, {row, column, index}) => {
                                let value = row[column.key]
                                return this.getTableContent(h,value)
                            }
                        },
                        {
                            title: '周三',
                            key: 'Wednesday',
                            align: 'center',
                            render: (h, {row, column, index}) => {
                                let value = row[column.key]
                                return this.getTableContent(h,value)
                            }
                        },
                        {
                            title: '周四',
                            key: 'Thursday',
                            align: 'center',
                            render: (h, {row, column, index}) => {
                                let value = row[column.key]
                                return this.getTableContent(h,value)
                            }
                        },
                        {
                            title: '周五',
                            key: 'Friday',
                            align: 'center',
                            render: (h, {row, column, index}) => {
                                let value = row[column.key]
                                return this.getTableContent(h,value)
                            }
                        },
                        {
                            title: '周六',
                            key: 'Saturday',
                            align: 'center',
                            render: (h, {row, column, index}) => {
                                let value = row[column.key]
                                return this.getTableContent(h,value)
                            }
                        },
                    ]
                },
                calData: [

                ],
                dayMonth: [],
                firstDay: 0,
                trCount: 0,
                valData:[],
                dateShow:{
                    year:"",
                    month:""
                }
            }
        },
        created() {
            this.init(this.year,this.month)
            this.setCal(this.year, this.month, this.isMondayFirst)
            this.loadAttendanceData()
        },
        methods: {
            init(year,month){
                this.dateShow.year = year
                this.dateShow.month = month
                if(this.isMondayFirst){
                    this.columns = this.columnsAll.mondayFirst
                }else{
                    this.columns = this.columnsAll.sundayFirst
                }

                this.dayMonth = [0, 31, 28 + isLeap(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]
                var date = new Date(year, month - 1, 1);
                //判断第一天是周几，返回0-6，代表周日-周六
                if (this.isMondayFirst) {
                    this.firstDay = (date.getDay() + 6) % 7
                }else{
                    //计算行数，周日开头
                    this.firstDay = date.getDay()
                }
                this.trCount = Math.ceil(( this.firstDay  + this.dayMonth[month]) / 7)
            },
            setCal(year,month,isMondayFrist) {
                var showData = []
                //填充数据到 列表data中
                for (var i = 0; i < this.trCount; i++) {
                    var trData = {}
                    for (var j = 0; j < 7; j++) {
                        var idx = i * 7 + j;
                        var value = idx - this.firstDay + 1
                        var key = getWeekDay(j, this.isMondayFirst).key
                        if (value <= 0 || value > this.dayMonth[month]) {
                            trData[key] = {
                                currentMonth: false,
                            }
                        } else {
                            trData[key] = {
                                type: "-1",
                                isTimeShow:"0",
                                num: value,
                            }
                        }
                    }
                    showData.push(trData)
                }
                this.calData = showData
            },
            fillCalendar(valData){
                this.valData = valData
                for (var i = 0; i < this.trCount; i++) {
                    var trData = this.calData[i]
                    for (var j = 0; j < 7; j++) {
                        var idx = i * 7 + j;
                        var value = idx - this.firstDay + 1
                        var key = getWeekDay(j, this.isMondayFirst).key
                        if (value > 0 && value <= this.dayMonth[this.dateShow.month] && value <= valData.length) {
                            trData[key].type = valData[value-1].type
                            trData[key].from = valData[value-1].from
                            trData[key].to = valData[value-1].to
                            trData[key].isTimeShow = valData[value-1].isTimeShow
                        }
                    }
//                    console.log(trData)

                }
            },
            getTableContent(h,value){
                let currentMonth = value.currentMonth
                let type = value.type === undefined? '0' : value.type
                let from = value.from
                let to = value.to
                let num = value.num || -1
                let isTimeShow = value.isTimeShow
                return (
                    h(
                        "DateCell",
                        {
                            props: {
                                currentMonth: currentMonth,
                                type: type,
                                from: from,
                                to: to,
                                num: num,
                                isTimeShow:isTimeShow,
                            }
                        }
                    )
                )
            },
            setIsMondayFirst(flag){
                if(flag !== this.isMondayFirst){
                    this.isMondayFirst = flag;
                    this.init();
                    this.calData=[]
                    this.setCal();
                    this.fillCalendar(this.valData)
                }
            },
            resetData(year,month){
                this.init(year,month)
                this.setCal(year,month,this.isMondayFirst)
                this.loadAttendanceData()
            },
            loadAttendanceData(){
                this.$emit('loadData')
            }
        }
    }

    function isLeap(year) {
        if (year % 100 == 0) {
            return year % 400 == 0 ? 1 : 0
        } else {
            return year % 4 == 0 ? 1 : 0
        }
    }

    function getWeekDay(index, isMondayFirst) {
        var weekDayColletion = [
            {
                key: "Sunday",
                value: "周日",
            },
            {
                key: "Monday",
                value: "周一",
            },
            {
                key: "Tuesday",
                value: "周二",
            },
            {
                key: "Wednesday",
                value: "周三",
            },
            {
                key: "Thursday",
                value: "周四",
            },
            {
                key: "Friday",
                value: "周五",
            },
            {
                key: "Saturday",
                value: "周六",
            }
        ]
        if (isMondayFirst) {
            index = (index + 1) % 7;
        }
        return weekDayColletion[index]
    }
</script>